<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. PNG（Portable Network Graphics）
        //     特点：

        //         无损压缩：PNG 使用无损压缩技术，意味着图像质量不会因压缩而下降。
        //         支持透明度：PNG 支持透明和半透明像素，可以用于需要透明背景的图像，如图标、标志等。
        //         支持多种颜色深度：PNG 可以支持 8 位（256 色）或 24 位（数百万色）图像。

        //         适用场景：
        //         需要透明背景的图像：如图标、标志、UI 元素等。
        //         需要高质量的图像：如需要保持细节且不损失质量的图像，尤其是包含文字、线条或其他清晰度要求较高的内容。
        //         小尺寸图像：例如小图标、按钮等。

        //     不适用场景：
        //         大尺寸照片：由于无损压缩，PNG 文件通常比 JPG 大，因此不适合用于需要小文件大小的场景。
        //         示例：网站上的透明图标、具有细节的插图。

        // 2. JPG/JPEG（Joint Photographic Experts Group）
        //     特点：
        //     有损压缩：JPG 使用有损压缩，可以显著减少文件大小，但会牺牲一定的图像质量。压缩程度可以调整，平衡质量和文件大小。
        //     不支持透明度：JPG 不支持透明背景。
        //     支持丰富的颜色：JPG 可以表现丰富的颜色，适合复杂色彩的图像。

        //     适用场景：
        //     摄影图像和照片：适合色彩丰富、细节较多的图像，如摄影作品。
        //     网页图片：需要快速加载且可以接受一定质量损失的图片场景，如网页上的大图或背景图。
        //     大尺寸图片：由于其压缩性，适合用于需要减少文件大小的场景。

        //     不适用场景：
        //     需要透明背景的图像。
        //     需要保持细节和清晰度的图像，如图标、插图等。
        //     示例：网站上的背景图、在线相册中的照片。

        // 3. GIF（Graphics Interchange Format）
        // 特点：
        //     支持动画：GIF 可以存储多帧图像，实现简单的动画效果。
        //     支持透明度：支持单一透明色，但不支持半透明。
        //     颜色限制：GIF 只支持 256 色，因此不适合色彩丰富的图像。

        // 适用场景：
        //     动画图像：用于简单的动画，如表情符号、广告横幅、简单的动画效果。
        //     简约图像：适合颜色较少、细节简单的图像，如简易图表、按钮等。

        // 不适用场景：
        //     复杂色彩和细节丰富的图像：由于色彩限制，GIF 不适合用于需要展示丰富色彩和细节的场景。
        //     大尺寸图片：由于颜色限制和动画帧的存储，GIF 不适合用于大尺寸或高质量图片。
        //     示例：社交媒体上的动画表情、简单的动态图。


        // 4.WebP 的特点

        //     高压缩效率：
        //         有损压缩：类似于 JPG 的有损压缩，WebP 可以在保持较高图像质量的情况下大幅度减少文件大小。
        //         无损压缩：类似于 PNG 的无损压缩，WebP 在保持原始图像质量的情况下仍能大幅减少文件大小。

        //     支持透明度：
        //         WebP 支持 PNG 样式的透明度（alpha 通道），并且与 JPG 不同，WebP 可以将透明度与有损压缩结合使用。
        //         支持动画：
        //         WebP 支持 GIF 样式的动画功能，具有更好的压缩效率和图像质量。

        //     适用场景
        //         需要高质量和小文件大小的图像：
        //         WebP 可以在保证高质量的同时显著减小文件大小，非常适合网页图片，能够提升网页加载速度。
        //         需要透明背景的图像：
        //         WebP 支持透明背景，同时还能进行有损压缩，非常适合需要透明度的网页图标和图片。
        //         需要动画的图像：
        //         WebP 可以替代 GIF，用于存储动画图片，通常会有更小的文件大小和更好的图像质量。


        //     不适用场景
        //         浏览器兼容性问题：
        //         尽管 WebP 的支持已经广泛，但仍有一些老旧浏览器和特殊应用场景不支持 WebP。在这种情况下，可能需要提供 WebP 的替代格式（如 JPG、PNG）。
        //         非常简单的图像：
        //         对于非常小或颜色极少的图片，WebP 的压缩优势可能并不明显，传统的 PNG 或 GIF 可能更合适。
    </script>
</body>
</html>